<template>
  <view
    v-if="loading"
    :class="['skeleton', className, { 'skeleton--animate': animate }]"
    :style="compStyle"
  >
    <view
      v-if="avatar"
      :class="['skeleton__avatar', `skeleton--${avatarShape}`]"
      :style="{
        width: avatarSize,
        height: avatarSize,
        'background-color': bgColor,
      }"
    />
    <view :class="['skeleton__content', flex ? 'flex' : '']">
      <view
        v-if="title"
        class="skeleton__title"
        :style="{
          width: titleWidth,
          'background-color': bgColor,
          float: titleRight ? 'right' : '',
        }"
      />
      <view
        v-for="(item, index) in rowArr"
        :key="index"
        class="skeleton__row"
        :style="{
          width: isWidthArray ? rowWidth[index] : rowWidth,
          height: isHeightArray ? rowHeight[index] : rowHeight,
          'margin-top': rowDistance,
          'background-color': bgColor,
        }"
      ></view>
    </view>
  </view>
  <view
    v-else
    :class="['skeleton__content', className]"
    @click="handleClick"
    :style="compStyle"
  >
    <slot />
  </view>
</template>

<script>
export default {
  name: 'skeleton',

  props: {
    className: String,
    compStyle: String,
    flex: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Number,
      default: 0,
    },
    title: Boolean,
    avatar: Boolean,
    loading: {
      type: Boolean,
      default: true,
    },
    animate: {
      type: Boolean,
      default: true,
    },
    avatarSize: {
      type: String,
      default: '32px',
    },
    avatarShape: {
      type: String,
      default: 'round',
    },
    titleWidth: {
      type: String,
      default: '40%',
    },
    titleRight: {
      type: Boolean,
      default: false,
    },
    rowWidth: {
      type: null,
      default: '100%',
    },
    rowHeight: {
      type: null,
      default: '16px',
    },
    rowDistance: {
      type: String,
      default: '12px',
    },
    bgColor: {
      type: String,
      default: '#f2f3f5',
    },
  },

  computed: {
    isWidthArray() {
      return this.rowWidth instanceof Array;
    },

    isHeightArray() {
      return this.rowHeight instanceof Array;
    },

    rowArr() {
      return Array(this.row).fill('');
    },
  },

  methods: {
    handleClick(event) {
      this.$emit('click', event);
    },
  },
};
</script>

<style lang="scss">
.skeleton {
  display: flex;
  box-sizing: border-box;
  width: 100%;

  &__avatar {
    flex-shrink: 0;
    margin-right: 16px;

    &.skeleton--round {
      border-radius: 100%;
    }
  }

  &__content {
    flex: 1;
    &.flex {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }
  }

  &__avatar + &__content {
    padding-top: 8px;
  }

  &__row,
  &__title {
    height: 16px;
  }

  &__title {
    margin: 0;
  }

  &__row {
    display: inline-block;

    &:not(:first-child) {
      margin-top: 12px;
    }
  }

  &__title + &__row {
    margin-top: 20px;
  }

  &.skeleton--animate {
    animation: skeleton-blink 1.2s ease-in-out infinite;
  }
}

@keyframes skeleton-blink {
  50% {
    opacity: 0.6;
  }
}
</style>
